<!-- 
    需要传入的属性
    mode: String edit：启动编辑 show：展示
    zoomprop: Number, 初始缩放
    centerprop: Array, 经纬度，[121.5273285, 31.21515044]
    pathprop: Array, 区域路径点集 [[121.5273285, 31.21515044], [121.5293285, 31.21515044], [121.5293285, 31.21915044], [121.5273285, 31.21515044]]
 -->

<template>
    <div class="mapFrame">
        <div class="map-page-container">
            <el-amap :show-label="true" :center="this.center" :zoom="this.zoom" ref="amap">
                <el-amap-polygon :path="this.polygon.path" :visible="this.polygon.visible" :editable="this.polygon.edit"
                    :draggable="this.polygon.draggable" ref="polymap" />
                <el-amap-control-tool-bar visible="true"></el-amap-control-tool-bar>
            </el-amap>
        </div>
        <div class="toolbar">
            <button @click="toggleVisible">
                {{ polygon.visible ? '隐藏标记' : '显示标记' }}
            </button>
            <template v-if="this.mode == 'edit'">
                <button @click="changeEditable">
                    {{ polygon.edit ? '完成编辑' : '开始编辑' }}
                </button>
            </template>
        </div>
    </div>
</template>

<style scoped>
.mapFrame {
    width: 100%;
    height: 100%;
    min-height: 300px;
    min-width: 300px;
}

.map-page-container {
    width: 100%;
    height: 90%;
}
</style>

<script>
export default {
    props: {
        mode: {
            type: String,
            default: 'edit',
        },
        zoomprop: {
            type: Number,
            default: null,
        },
        centerprop: {
            type: Array,
            default: null,
        },
        pathprop: {
            type: Array,
            default: null,
        },
    },

    setup() {

    },

    data() {
        return {
            zoom: 15,
            center: [103.8867, 30.7950],
            polygon: {
                draggable: true,
                visible: true,
                edit: true,
                path: [[103.8850, 30.7940], [103.8875, 30.7930], [103.8890, 30.7960], [103.8855, 30.7970]],
            }
        }
    },

    methods: {
        toggleVisible() {
            this.polygon.visible = !this.polygon.visible;
        },
        changeEditable() {
            this.polygon.edit = !this.polygon.edit;
        },
    },

    mounted() {


        console.log('mounted');
        if (this.mode === 'edit') {
            this.polygon.edit = true;
        } else {
            this.polygon.edit = false;
        }
        if (this.zoomprop !== null) {
            this.zoom = this.zoomprop;
        }
        if (this.centerprop !== null) {
            this.center = this.centerprop;
        }
        if (this.pathprop !== null) {
            // console.log('get path');
            // console.log(this.pathprop);
            this.polygon.path = this.pathprop;
            //console.log(this.polygon.path);
        }

    },

}
</script>
